<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="query">
        <span class="state">
          <img src="/@/assets/images/submit.png" alt="" />
          待提交
        </span>
        <a-form layout="inline" class="query-form" :model="queryForm" ref="formRef">
          <a-form-item name="custName">
            <a-input style="width: 170rem" v-model:value="queryForm.custName" placeholder="请输入客户名称" />
          </a-form-item>
          <a-form-item name="bussNo">
            <a-input style="width: 170rem" v-model:value="queryForm.bussNo" placeholder="请输入订单编号" />
          </a-form-item>
          <a-form-item>
            <a-button class="submit" type="primary" @click="getData">查询</a-button>
            <a-button @click="resetForm">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="list">
        <Card class="card" v-for="(item, index) in list" :key="item" :info="item" type="wait" @itemClick="itemClick(item, index)" />
      </div>
      <a-pagination
        class="pager"
        v-model:current="pageNo"
        v-model:page-size="pageSize"
        @change="onPageChange"
        :total="total"
        show-size-changer
        show-quick-jumper
      />
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import Card from './components/card_wait.vue';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRzApplyStore } from '/@/store/modules/system/rzApply';
  let rzApplyStore = useRzApplyStore();
  const router = useRouter();
  const queryForm = ref({
    bussNo: '',
    custName: '',
  });
  const formRef = ref();
  const list = ref([]);
  const pageNo = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  function itemClick(item, index) {
    rzApplyStore.clear()
    rzApplyStore.setBussNo(item.bussNo);
    rzApplyStore.setMode('edit');
    router.push({ path: '/rzApply/add', query: { bussNo: item.bussNo||'xxx' } });
  }
  function resetForm() {
    formRef.value.resetFields();
  }
  function onPageChange(pageNo) {
    pageNo.value = pageNo;
    getData();
  }

  async function getData() {
    const res = await rzApplyApi.page({
      pageNum: pageNo.value,
      pageSize: pageSize.value,
      type: 0,
      sortItemList: [
        {
          isAsc: false,
          column: 'finishTime',
        },
      ],
      ...queryForm.value,
    });
    console.log(res);
    if (res.code == 0) {
      total.value = res.data.total;
      list.value = res.data.list;
    }
  }
  onMounted(() => {
    getData();
  });
</script>
<style scoped lang="less">
  .app-page {
    display: flex;
    flex-direction: column;
    .query {
      width: 100%;
      display: flex;
      margin: 24rem;
      box-sizing: border-box;
      .state {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 22rem;
        color: #1169e5;
        margin-right: 200rem;
        img {
          width: 20rem;
          height: 19rem;
          margin-right: 14rem;
        }
      }
      .form {
        float: 1;
        display: flex;
      }
    }
    .list {
      flex: 1;
      padding: 1rem 0 0 24rem;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;

      .card {
        margin: 0 30rem 30rem 0;
      }
    }
  }
</style>
